<template>
  <div class='user-page'>
    <div class="user-profile">
      <div class="info">
        <van-image round fit="cover" :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+user.email+'&spec=100'" />
        <h3 class="name">{{ user.nickName }}</h3>
        <!-- <router-link class="btn" to="/user/profile">个人信息
          <van-icon name="arrow" />
        </router-link> -->
      </div>
      <van-row>
        <van-col span="8">
          <p>{{bill.num}}</p>
          <p>本月次数</p>
        </van-col>
        <van-col span="8">
          <p>{{bill.MMoney}}</p>
          <p>本月金额</p>
        </van-col>
        <van-col span="8">
          <p>{{bill.allMoney}}</p>
          <p>总金额</p>
        </van-col>
      </van-row>
      <van-row class="user-links">
        <van-col span="6">
          <geek-icon name="message" />这是假的
        </van-col>
        <van-col span="6">
          <geek-icon name="mycollect" />不能点击
        </van-col>
        <van-col span="6">
          <geek-icon name="history" />为啥要留
        </van-col>
        <van-col span="6">
          <geek-icon name="myworks" />因为好看
        </van-col>
      </van-row>
    </div>
    <div class="more">
      <p class="bb">更多服务</p>
      <van-row>
        <van-col span="6">
          <geek-icon name="feedback2" />用户反馈
        </van-col>
        <van-col span="6" @click.native="lgout()">
          <geek-icon name="shezhi" />退出登录
        </van-col>
        <van-col span="6">
        </van-col>
        <van-col span="6">
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { info, bills } from '@/api/user'
import { logout } from '@/api/index'
export default {
  name: 'UserPage',
  data () {
    return {
      user: {},
      bill: {}
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getBills()
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const [, res] = await info()
      this.user = res.user
    },
    async getBills () {
      const [, res] = await bills()
      this.bill = res.data
    },
    async lgout () {
      this.$dialog.confirm({
        title: '系统提示',
        message: '确定要退出登录?'
      })
        .then(() => {
          logout()
          this.$store.commit('user/setToken', '')
          this.$router.push('/')
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>
<style scoped lang='less'>
@keyframes light {
  0% {
    box-shadow: 0 0 4px #f00;
  }
  25% {
    box-shadow: 0 0 16px #0f0;
  }
  50% {
    box-shadow: 0 0 4px #00f;
  }
  75% {
    box-shadow: 0 0 16px #0f0;
  }
  100% {
    box-shadow: 0 0 4px #f00;
  }
}
.user-page {
  background: #fafafa;
  height: 100%;
}
.more {
  margin: 0 15px;
  margin-top: 60px;
  background-color: #fff;
  border-radius: 10px;
  height: 120px;
  p {
    font-size: 16px;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #00000014;
  }
  .van-row {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    .geek-icon {
      display: block;
      font-size: 22px;
      padding-bottom: 5px;
    }
  }
}
.user {
  &-profile {
    width: 100%;
    height: 240px;
    display: block;
    // background: linear-gradient(318deg, #b2b5db 0%, #565482 70%, #494675 100%);
    background-image: linear-gradient(to left top, #0eb659, #01b260, #00af66, #00ab6b, #00a770, #00a474, #00a078, #009d7b, #00997e, #009581, #009183, #008d84);
    color: #fff;
    border-bottom-left-radius: 400px 60px;
    border-bottom-right-radius: 400px 60px;
    .info {
      display: flex;
      padding: 15px 10px;
      height: 100px;
      align-items: center;
      .van-image {
        width: 60px;
        height: 60px;
        // border: 3px solid #7674a2;
        animation: light 4s ease-in-out infinite;
        transition: 0.5s;
      }
      .name {
        font-size: 20px;
        font-weight: normal;
        margin-left: 15px;
        flex: 1;
      }
      .btn {
        color: #fff;
        line-height: 1;
        font-size: 12px;
        .van-icon {
          position: relative;
          top: 1px;
        }
      }
    }
    p {
      margin: 0;
      text-align: center;
      height: 20px;
    }
  }
  &-links {
    margin: 0 15px;
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    color: #333;
    position: relative;
    top: 20px;
    .geek-icon {
      display: block;
      font-size: 22px;
      padding-bottom: 5px;
    }
  }
}
</style>
